<template>
	<view class="container">
		<!-- 视频组件 -->
		<video id="myVideo" :src="videoSrc" @error="videoErrorCallback" controls="false"
			style="width:100%;height:200px;border-radius: 10px;" loop>
		</video>
		<!--热门课程-->
		<view class="courses-Two">
			<view class="courses-text">
				<text style="font-weight: bold;font-size: 18px;">热门课程</text>
				<view class="courses-icoe">
					<text @click="kec">更多</text>
					<image src="../../static/image/youbiao.png" mode=""></image>
				</view>
			</view>
			<view class="courses-grid">
				<view class="courses-item" v-for="(course, index) in courses" :key="index">
					<image class="courses-image" :src="course.src" mode="aspectFill" @click="goToCourseDetail(course)">
					</image>
					<text class="courses-title">{{ course.title }}</text>
					<br>
					<view class="subtitle">
						<text class="subtitle-1">{{ course.subtitle }}</text>
						<text class="subtitle-2">{{ course.price }}</text>
					</view>
					
					<view class="rating-container">
						<text class="rating">{{ course.pingfen}}</text>
						<uni-rate :readonly="true" :value="4" class="rate" />
					</view>
				</view>
			</view>
		</view>
		<!--热门老师-->
		<view class="teachers-Two">
			<view class="teachers-text">
				<text style="font-weight: bold;font-size: 18px;">热门老师</text>
				<view class="teachers-icoe">
					<text @click="laoshi">更多</text>
					<image src="../../static/image/youbiao.png" mode=""></image>
				</view>
			</view>
			<view class="teachers-grid">
				<view class="teachers-item" v-for="(teacher, index) in teachers" :key="index">
					<image class="teachers-image" :src="teacher.src" mode="aspectFill"></image>
					<text class="teachers-subtitle">{{ teacher.subtitle }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoSrc: '/static/video/intro.mp4',
				images: [{
						src: '/static/image/软件技术.png'
					},
					{
						src: '/static/image/python.png'
					},
					{
						src: '/static/image/uniapp.png'
					},
					{
						src: '/static/image/c语言.png'
					}
				],
				courses: [{
						src: '/static/image/mysql3.png',
						title: 'MySQL基础入门–mysql数据库实战教程',
						subtitle: '李老师',
						pingfen: '4.7',
						price: '￥250.00'
					},
					{
						src: '/static/image/高等数学.png',
						title: '专升本高等数学微积分课程学习',
						subtitle: '张老师',
						pingfen: '4.9',
						price: '￥120.00'
					},
				],
				teachers: [{
						src: '/static/teacher/4.png',
						subtitle: '欧阳老师',
					},
					{
						src: '/static/teacher/2.png',
						subtitle: '罗老师',
					},
				]
			};
		},
		methods: {
			leibie() {
				uni.navigateTo({
					url: "/pages/info-one/info-one"
				})
			},
			kec() {
				uni.navigateTo({
					url: "/pages/info-two/info-two"
				})
			},
			laoshi() {
				uni.navigateTo({
					url: "/pages/info-three/info-three"
				})
			},
			goToCourseDetail(course) {
				// 将课程信息序列化后通过 URL 参数传递
				uni.navigateTo({
					url: `/pages/course/course?title=${course.title}&teachers=${course.subtitle}&price=${course.price}`
				});
			},
		},
	};
</script>

<style>
	.container {
		padding: 5px;
		height: auto;
	}

	/* 网格容器 */
	.grid {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 10px;
	}

	/* 每个网格项 */
	.grid-item {
		flex: 1 1 48%;
		/* 占据大约一半宽度（考虑到间隙） */
		max-width: 50%;
		height: 110px;
		overflow: hidden;
	}

	/* 图片样式 */
	.grid-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 5px;
	}

	.courses-twe {
		margin-top: 10px;
		width: 100%;
		height: 30rpx;
	}

	.courses-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx;
		font-size: 15px;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.courses-icoe {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.courses-icoe image {
		width: 40rpx;
		height: 40rpx;
	}

	/* 热门课程 */
	.courses-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.courses-item {
		width: calc(50% - 5px);
		height: 250px;
		overflow: hidden;
	}

	.courses-image {
		width: 100%;
		height: 130px;
		object-fit: cover;
		border-radius: 5px;
	}

	.courses-title {
		font-size: 16px;
		margin-top: 10px;
	}

	.subtitle{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px;
	}
	.subtitle-1{
		color: gray;
	}
	.subtitle-2{
		color: red;
		font-size: 15px;
	}
	.rating-container {
		display: flex;
		align-items: center;
		margin-top: 5px;
	}

	.rating {
		font-size: 16px;
		margin-right: 18px;
	}

	/* 热门老师 */
	.teachers-twe {
		margin-top: 10px;
		width: 100%;
		height: 30rpx;
	}

	.teachers-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx;
		font-size: 15px;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.teachers-icoe {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.teachers-icoe image {
		width: 40rpx;
		height: 40rpx;
	}

	.teachers-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.teachers-item {
		width: calc(50% - 5px);
	}

	.teachers-image {
		width: 200px;
		height: 200px;
		border-radius: 5px;
	}
</style>